// webpack 的基本配置文件 (修改就要重启)

// mode 打包环境
// 入口
// 出口

// 模块打包规则 (module-loader)
// CSS/JS/PNG/React/Vue/JSON

// plugin 插件

// 配置服务器 
const path = require('path')
const openBrowserPlugin = require("webpack-open-browser-plugin")   // 自动打开浏览器 
const htmlWebpackPlugin = require('html-webpack-plugin')   // 打包HTML 文件 
const miniCssExtractPlugin = require('mini-css-extract-plugin')   // 打包并且抽离CSS
const webpack = require('webpack')

// console.log(webpack)
module.exports = {
    mode: "development", // production
    entry: ['./src/main.js'],  // 入口 多个入口文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'js/[name].[fullhash:8].js',  // fullhash:8 长度为8的随机字符串 避免JS文件名相同导致浏览器缓存 
    },

    devtool: "source-map", // 打开你的资源图 方便在线调试  (缺点 容易被别人偷代码 上线一定要关闭)

    // 别名
    resolve: {
        alias: {
            "@": path.resolve('src'),
            "~": path.resolve('src/utils'),
        }
    },

    // 模块打包 
    module: {  //   模块打包规则 (module-loader)
        rules: [
            {
                test: /\.css$/,
                use: [miniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.less$/,
                use: [miniCssExtractPlugin.loader, 'css-loader', 'less-loader'],
            },
            {
                test: /\.(sass|scss)$/,
                use: [miniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            },
            {
                test: /\.(png|gif|svg|jpg|eot|ttf|woff|woff2)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit: 8192,  // 8M图片最大8M 
                            name: 'imgs/[name].[hash:8].[ext]' // 404.png =>  404.1234qwer.png 
                        }
                    }
                ]
            }
        ]
    },


    // 配置服务器 
    devServer: {
        host: "0.0.0.0",   // 主机名  localhost  0.0.0.0 => 指向的所有的IP字段 
        port: 7700,     // 端口 
        hot: true,      // 热更新  
        // open:true,    // 自动打开浏览器 
        proxy: {  // 代理

        }
    },

    // webpack 插件 
    plugins: [
        // 打开浏览器 
        new openBrowserPlugin({
            url: "http://localhost:7700"
        }),

        // 打包HTML 
        new htmlWebpackPlugin({
            inject: true,  //  自动注入css/js
            minify: true,  // 压缩文件 
            template: './public/index.html'
        }),

        // 抽离css
        new miniCssExtractPlugin({
            filename: 'css/[name].[contenthash:8].css', // 打包的文件名
            chunkFilename: 'css/[id].[contenthash:8].css'
        }),

        new webpack.HotModuleReplacementPlugin(),  // webpack 热替换模块 

        new webpack.ProvidePlugin({   // 全局自动引入文件 
            axios: 'axios',
            React: 'react',
            Component: ['react', 'Component']
        })
    ]

}